<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-for循环</title>
</head>

<body>
  <div id="root">
    <!-- 循环输出 -->
    <ul>
      <!-- script引入的方式，没有key也不会有警告 -->
      <li v-for="item in users" :key="item.id">
        {{ item.id }} -- {{ item.name }}
      </li>
    </ul>
    <hr>
    <ul>
      <!-- index 循环数组的索引值 -->
      <li v-for="(item,index) in users" :key="item.id">
        {{ index }} -- {{ item.id }} -- {{ item.name }} -- <span>删除</span>
      </li>
    </ul>
    <hr>
    <ul>
      <!-- 对于数组来说，for in 或 for of 效果一样的，建议 for of性能更好一些 -->
      <!-- index 循环数组的索引值 -->
      <li v-for="(item,index) of users" :key="item.id">
        {{ index }} -- {{ item.id }} -- {{ item.name }} -- <span>删除</span>
      </li>
    </ul>
    <hr>
    <div>对象</div>
    <!-- 
      for in 和 for of 循环对象中也是一样的 效果一致  vue兼容
    -->
    <ul>
      <li v-for="(item,key,index) in obj">
        {{ index }} -- {{ key }} -- {{ item }}
      </li>
    </ul>
    <hr>
    <ul>
      <li v-for="(item,key,index) of obj">
        {{ index }} -- {{ key }} -- {{ item }}
      </li>
    </ul>

    <!-- template 它可以写v-if  v-for 指令，template又不会解析成html标签 -->

    <ul>
      <!-- template 伪标签，不解析为html -->
      <template v-for="item in users">
        <li>
          {{ item.name }}
        </li>
      </template>
    </ul>

  </div>

  <script src="./lib//vue.js"></script>
  <script>
    new Vue({
      el: '#root',
      data: {
        // 数组  日后会通过网络请求后端数据得到
        users: [
          { id: 1, name: '张三' },
          { id: 2, name: '李四' },
          { id: 3, name: '王五' }
        ],
        obj: {
          id: 1,
          name: '赵六'
        }
      }
    })
  </script>
</body>

</html>